import { Handle, Position } from "reactflow";
import "./ProcessorNode.css";

interface ProcessorNodeProps {
  data: {
    label: string;
    config?: {
      operation?: string;
      script?: string;
    };
  };
  selected: boolean;
}

function ProcessorNode({ data, selected }: ProcessorNodeProps) {
  const operation = data.config?.operation || "未设置";

  return (
    <div className={`processor-node ${selected ? "selected" : ""}`}>
      {/* 左侧输入连接点 */}
      <Handle
        type="target"
        position={Position.Left}
        id="target-left"
        className="processor-handle-left"
      />

      <div className="processor-node-content">
        <div className="processor-node-label">{data.label}</div>
        <div className="processor-node-details">
          <div className="processor-node-detail">
            <span className="processor-node-detail-label">操作:</span>
            <span>{operation}</span>
          </div>
          {data.config?.script && (
            <div className="processor-node-detail">
              <span className="processor-node-detail-label">脚本:</span>
              <span>{data.config.script.substring(0, 15)}...</span>
            </div>
          )}
        </div>
      </div>

      {/* 右侧输出连接点 */}
      <Handle
        type="source"
        position={Position.Right}
        id="source-right"
        className="processor-handle-right"
      />
    </div>
  );
}

export default ProcessorNode;
